<template>
  <Row type="flex" justify="start" class="code-row-bg">
    <Card class="list-card" v-if="JSON.stringify(cve) !== '{}'">
      <div class="list-info">
        <div class="list-title">cve_id: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_id }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_exploitability_Score: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_exploitability_Score }}</Button>
          </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_problem_type: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_problem_type }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_publish_date: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_publish_date }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_security: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_security }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_impact_Score: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_impact_Score }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_description: </div>
        <div class="list-item">
          <Button size="small">{{ cve.cve_description }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_company: </div>
        <div class="list-item">
          <Button size="small" v-for="(item, index) in cve.cve_company" :key="index">{{ item }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_affects: </div>
        <div class="list-item">
          <Button size="small" v-for="(item, index) in cve.cve_affects" :key="index">{{ item }}</Button>
        </div>
      </div>
      <div class="list-info">
        <div class="list-title">cve_reference: </div>
        <div class="list-item">
          <Button size="small" v-for="(item, index) in cve.cve_reference" :key="index"><a :href="`${item}`" target="_blank">{{item}}</a></Button>
        </div>
      </div>
    </Card>
    <div class="list-empty" v-else>
      暂无数据
    </div>
  </Row>
</template>

<script>
export default {
  props: {
    cve: {
      default: function () {
        return {}
      }
    }
  },

  mounted () {
    // console.log('cve', this.props.cve)
  }
}
</script>

<style>
.list-card {
  min-height: 500px;
  width: 100%;
  margin: 20px 0;
}
.list-info {
  display: flex;
  margin: 10px auto;
}
.list-title {
  width: 160px;
  flex-shrink: 0;
}
.list-item span {
  display: inline-block;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-all;
}
.list-item button {
  border-radius: 15px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
